
<template>
  <div class="outline__list" style="display: flex; flex-direction: column;">
    <h2 class="text-gray-400">大纲</h2>
    <template v-for="(heading, index) in headings" :key="index" >
      <el-popover
        trigger="click"
        placement="right"
      >
        <template #reference>
           
<el-button
  @click="handleHeadingClick(heading)"
  text
  class="outline__item"
  :class="`outline__item--${heading.level}`"
  style="text-align: left !important; width: 100%; display: block;"
>
  {{ heading.text }}
</el-button>
        </template>
        <!-- 如果需要弹出内容，请在这里添加 -->
      </el-popover>
    </template>
  </div>
</template>

<script setup lang="ts">
import { h, ref, type Component } from 'vue'
import { storeToRefs } from 'pinia'
import  {useEditorStore} from '@/stores/editStore'
const editorStore = useEditorStore()
const { headings } = storeToRefs(editorStore)
/**
 * 左侧区域
 */
const handleHeadingClick = (data:any) => {
 editorStore.setActiveHeading(data)
    console.log('点击了大纲项:', data)
    console.log('点击了大纲项:', data.id)
}
</script>

<style scoped lang="scss">

.outline {
  opacity: 0.75;
  border-radius: 0.5rem;
  padding: 0.75rem;
  background: rgba(black, 0.1);

  &__list {
    list-style: none;
    font-size: 18px;
    padding: 0;
  }

  &__item {
    a:hover {
      opacity: 0.5;
    }
    &--1 {
      font-size: 30px;
    }
    &--2 {
      font-size: 20px;
      padding-left: 1rem;
    }
    &--3 {
      font-size: 10px;  
      padding-left: 2rem;
    }

    &--4 {
      padding-left: 3rem;
    }

    &--5 {
      padding-left: 4rem;
    }

    &--6 {
      padding-left: 4rem;
    }
  }
}
</style>
